import React from 'react';
import { Chart } from '@antv/g2';

const data = [
  { item: '库存', count: 40, percent: 0.4 },
  { item: '采购', count: 21, percent: 0.21 },
  { item: '工单', count: 17, percent: 0.17 },
  { item: '检验', count: 13, percent: 0.13 },
  { item: '不合格', count: 9, percent: 0.09 },
];

class G2LineBin extends React.Component {
    componentDidMount() {
      const chart = new Chart({
        container: 'G2LineBin',
        autoFit: true,
        height: 500,
      });
      
      chart.coordinate('theta', {
        radius: 0.75,
      });
      
      chart.data(data);
      
      chart.scale('percent', {
        formatter: (val) => {
          val = val * 100 + '%';
          return val;
        },
      });
      
      chart.tooltip({
        showTitle: false,
        showMarkers: false,
      });
      
      chart
        .interval()
        .position('percent')
        .color('item')
        .label('percent', {
          content: (data) => {
            return `${data.item}: ${data.percent * 100}%`;
          },
        })
        .adjust('stack');
      
      chart.interaction('element-active');
      
      chart.render();
    }
    render() {
        return (
            <div id='G2LineBin'></div>
        )
    };
}
export default G2LineBin;